<template>
  <div class="step-wrapper">
    <div class="step-box">
      <div
        class="step-item"
        v-for="(item, index) in stepData"
        :key="index"
        :class="{ cur: stepIndex == index }"
        @click="handleChange(index)"
      >
        <div class="item-icon">
          <img :src="item.curIcon" alt="" v-if="stepIndex == index" />
          <img :src="item.icon" alt="" v-else />
        </div>
        <div class="item-name">
          {{ item.name }}
        </div>
      </div>
      <div class="step-poup" v-if="showPoup">
        <div class="poup-main" v-if="stepIndex == 0">
          <div class="poup-header">实验目的</div>
          <div class="poup-content" v-html="stepData[0].content"></div>
          <!-- <div class="content-title">一、调节元件:</div>
            <div class="content-text">1.掌渥迈克尔逊干涉仪的干涉原理；</div>
            <div class="content-text">2.了解非定域干涉和时间相干性；</div>
            <div class="content-text">3.学会测量激光波长和介质的折射率</div>
            <div class="content-text">
              4.学习一种测定光波长的方法，加强对等倾干涉的理解。
            </div> -->
        </div>
        <div class="poup-main" v-if="stepIndex == 1">
          <div class="poup-header">实验原理</div>
          <div class="poup-content" v-html="stepData[1].content"></div>
          <!-- <div class="content-title">一、调节元件:</div> -->
          <!-- <div class="content-text">
              如图所示是迈克耳逊干涉仪的原理示意图。来自光源的一束光照到分束器
              BS 上， 50% 的入射光被反射， 50%
              的光透射，因此光束被均分为两束，一束反射向定镜 M1 ，一束透射后射向
              M2 。两个反射镜都将光反射回分束器，来自 M1 的光透过分束器 BS
              到达观察者的眼睛。来自 M2
              的光通过补偿板，再通过分束器反射到观察者的眼睛 E 。
            </div>
            <div class="content-img">
              <img :src="'./data/experiment-img.png'" />
            </div>
            <div class="content-text">
              由于两束光来自同一个光源，它们的相位高度相关。将扩束器放到光源与分束器之间时，就可以观察到明暗相间的条纹，即干涉条纹。在上图中
              M2’ 是 M2 的虚像。迈克耳逊干涉仪光程差可以看做是 M1 与 M2’
              之间的气隙。补偿板与分束器的厚度及折射率相同。两束光在分束器与补偿板中所经过的光程是相等的，不同波长的光有相同的光程差。
            </div> -->
        </div>
        <div class="poup-main" v-if="stepIndex == 2">
          <div class="poup-header">实验器材</div>
          <div class="poup-content" v-html="stepData[2].content"></div>

          <!-- <div class="content-title">一、调节元件:</div> -->
          <!-- <div class="content-text">
              该干涉仪在迈克尔逊模式下可以观察干涉现象（如等倾干涉，等厚干涉，白光干涉等），精细波长对比，确定零光程差，测量空气及薄片的折射率。可以在迈克尔逊模式的基础上，完成格林泰曼干涉。在法布里-珀罗模式下可以观察多光束干涉，测量光谱的精细结构（如钠双线波长差）。
            </div>
            <div class="content-img">
              <img :src="'./data/LGS-7A 精密干涉仪.jpg'" />
            </div>
            <div class="content-text">
              1881
              年，迈克耳逊设计制造了一台双光束干涉仪。起初迈克耳逊设计这一干涉仪是为了测量以太（一种假设的光传播介质）是否存在，部分由于他的努力，以太被证明是不存在的。此后，迈克耳逊干涉仪被广泛地用于测量光的波长，或已知光源波长测量微小位移，以及研究光学介质。
            </div> -->
        </div>
        <div class="poup-main" v-if="stepIndex == 3">
          <div class="poup-header">实验步骤</div>
          <div class="poup-content" v-html="stepData[3].content"></div>
          <!-- <div class="content-scroll">
            <div
              class="content-step"
              v-for="(item, index) in stepList"
              :key="index"
            >
              <div class="step-header">
                <div class="step-title">
                  <div class="text">{{ item.title }}</div>
                  <div class="status" v-if="item.isFinished">已完成</div>
                </div>
                <div class="step-toggle" @click="handleToggle(index)">
                  <div class="toggle-text" v-if="item.toggle">收起</div>
                  <div class="toggle-text" v-else>展开</div>
                  <img
                    src="@/assets/common/icon-toggle.png"
                    class="icon"
                    :class="{ up: item.toggle }"
                    alt=""
                  />
                </div>
              </div>
              <div class="step-body" v-if="item.toggle">
                <template v-if="item.list && item.list.length > 0">
                  <div
                    class="step-col"
                    :class="{ cur: list.status }"
                    v-for="(list, key) in item.list"
                    :key="index"
                  >
                    <div class="step-text">{{ list.content }}</div>
                    <div class="step-status"></div>
                  </div>
                </template>
              </div>
            </div>
          </div> -->
        </div>
        <div class="poup-main" v-if="stepIndex == 4">
          <div class="poup-header">注意事项</div>
          <div class="poup-content" v-html="stepData[4].content"></div>
          <!-- <div class="content-title">一、调节元件:</div> -->
          <!-- <div class="content-text">
              1.在实验过程中，要注意保持实验环境的稳定性，避免外界震动和干扰对实验结果的影响。
            </div>
            <div class="content-text">
              2.保持干涉仪的光路清洁，并定期检查和清理反射镜和其他光学元件，以确保实验的准确性。
            </div>
            <div class="content-text">
              3.利用光探测器等测量设备，准确记录实验数据，并进行分析和整理。
            </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
  datas: {
    type: Object,
    default: () => ({}),
  },
});
watch(
  () => props.datas,
  (val) => {
    let equipments = val.equipments;
    let equipmentsData =""
    equipments.forEach((item:any)=>{
      if(item.amount>1){
        equipmentsData += `<p>${item.equipment.name}*${item.amount}</p>`
      }else{
        equipmentsData += `<p>${item.equipment.name}</p>`
      }
    })
    stepData.value[0].content = val.objective || "";
    stepData.value[1].content = val.principle || "";
    stepData.value[2].content = equipmentsData || "";
    stepData.value[3].content = val.steps || "";
    stepData.value[4].content = val.notice || "";
  },
  {
    deep: true,
  }
);
const stepIndex = ref(-1);
const showPoup = ref(false);
const stepData = ref([
  {
    icon: "./icons/icon-step-1.png",
    curIcon: "./icons/icon-step-1-cur.png",
    name: "目的",
    content: "",
  },
  {
    icon: "./icons/icon-step-2.png",
    curIcon: "./icons/icon-step-2-cur.png",
    name: "原理",
    content: "",
  },
  {
    icon: "./icons/icon-step-5.png",
    curIcon: "./icons/icon-step-5-cur.png",
    name: "器材",
    content: "",
  },
  {
    icon: "./icons/icon-step-3.png",
    curIcon: "./icons/icon-step-3-cur.png",
    name: "步骤",
    content: "",
  },
  {
    icon: "./icons/icon-step-4.png",
    curIcon: "./icons/icon-step-4-cur.png",
    name: "注意",
    content: "",
  },
]);

const stepList = ref([
  {
    title: "一、调节元件",
    isFinished: true,
    toggle: true,
    list: [
      {
        content:
          " step1:鼠标移入可调节元件范围后，高亮闪烁显示边缘;单击后弹窗显示调节操作框",
        status: true,
      },
      {
        content:
          "siep2:旋钮类:鼠标移入可调节元件范围后，高亮闪烁显示边缘，点击可调节旋钮，滑动鼠标滚轮调整数值，单次调整范围与旋钮最小单位相关;②按钮类:鼠标点击后，改变状态，如开变成关;③滑动类:鼠标按住滑块，在滑动方向上拖动即可调整。",
        status: true,
      },
      {
        content: "step3:关闭调节操作框。",
        status: true,
      },
    ],
  },
  {
    title: "二、观察数据",
    isFinished: false,
    toggle: false,
    list: [
      {
        content:
          " step1:鼠标移入可调节元件范围后，高亮闪烁显示边缘;单击后弹窗显示调节操作框",
        status: true,
      },
      {
        content:
          "siep2:旋钮类:鼠标移入可调节元件范围后，高亮闪烁显示边缘，点击可调节旋钮，滑动鼠标滚轮调整数值，单次调整范围与旋钮最小单位相关;②按钮类:鼠标点击后，改变状态，如开变成关;③滑动类:鼠标按住滑块，在滑动方向上拖动即可调整。",
        status: false,
      },
      {
        content: "step3:关闭调节操作框。",
        status: false,
      },
    ],
  },
  {
    title: "三、撰写实验报告",
    isFinished: false,
    toggle: false,
    list: [
      {
        content:
          " step1:鼠标移入可调节元件范围后，高亮闪烁显示边缘;单击后弹窗显示调节操作框",
        status: false,
      },
      {
        content:
          "siep2:旋钮类:鼠标移入可调节元件范围后，高亮闪烁显示边缘，点击可调节旋钮，滑动鼠标滚轮调整数值，单次调整范围与旋钮最小单位相关;②按钮类:鼠标点击后，改变状态，如开变成关;③滑动类:鼠标按住滑块，在滑动方向上拖动即可调整。",
        status: false,
      },
      {
        content: "step3:关闭调节操作框。",
        status: false,
      },
    ],
  },
]);
const handleToggle = (index: number) => {
  stepList.value[index].toggle = !stepList.value[index].toggle;
};
const handleChange = (index: number) => {
  if (stepIndex.value == index) {
    showPoup.value = false;
    stepIndex.value = -1;
  } else {
    stepIndex.value = index;
    showPoup.value = true;
  }
};
//抛出handleChange函数父组件调用
defineExpose({ handleChange });
</script>
<style lang="less" scoped>
.step-wrapper {
  position: absolute;
  width: 64px;
  left: 12px;
  top: 50%;
  height: 336px;
  transform: translateY(-50%);
  background: #fff;
  z-index: 9;
  border-radius: 8px;
}
.step-box {
  padding: 16px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin-bottom: 16px;
    .item-icon {
      width: 32px;
      height: 32px;
      border-radius: 4px;
    }
    .item-name {
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 11px;
      color: #4e5569;
      line-height: 16px;
    }
  }
  .step-poup {
    position: absolute;
    left: 68px;
    top: 0;
    height: 416px;
    z-index: 99;
    background: #fff;
    border: 1px solid #cecece;
    border-radius: 8px;
    overflow: hidden;
    .poup-main {
      height: 100%;
      .poup-header {
        padding: 0 12px;
        height: 40px;
        background: #ffffff;
        border-bottom: 1px solid #cecece;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 14px;
        color: #262626;
        line-height: 18px;
        align-items: center;
        display: flex;
      }
      .poup-content {
        width: 252px;
        padding: 12px;
        box-sizing: border-box;
        height: calc(100% - 40px);
        overflow: auto;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #595959;
      }
      .content-title {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 12px;
        color: #262626;
        line-height: 16px;
        margin-top: 16px;
      }
      .content-text {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #595959;
        margin-bottom: 8px;
      }
      .content-img {
        img {
          width: 100%;
        }
      }
      .content-scroll {
        height: 100%;
        width: 252px;
        overflow-y: auto;
        overflow-x: hidden;
        .content-step {
          position: relative;

          &::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 0;
            height: 1px;
            background-color: #e6ebf1;
          }
          .step-header {
            display: flex;
            align-items: center;
            padding: 0 12px;
            justify-content: space-between;
            height: 40px;
            position: relative;
            .step-title {
              display: flex;
              align-items: center;
              .text {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: #262626;
                line-height: 16px;
                text-align: left;
                font-style: normal;
              }
              .status {
                margin-left: 12px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #00c090;
                line-height: 16px;
                text-align: left;
                font-style: normal;
              }
            }
            .step-toggle {
              display: flex;
              align-items: center;
              cursor: pointer;
              .toggle-text {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #595959;
                line-height: 16px;
                text-align: left;
                font-style: normal;
              }
              .icon {
                width: 12px;
                height: 12px;
                transition: all 0.3s ease-in-out;
                &.up {
                  transform: rotate(180deg);
                }
              }
            }
          }
          .step-body {
            padding-bottom: 4px;
            .step-col {
              padding: 4px 12px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .step-text {
                width: 172px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #595959;
                line-height: 16px;
                text-align: left;
                font-style: normal;
              }
              .step-status {
                width: 16px;
                height: 16px;
              }
              &.cur {
                background: #f3fffc;
                .step-status {
                  background: url(@/assets/common/icon-finished.png) no-repeat
                    center / cover;
                  background-size: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
